<template>
	<view class="box">
		<view class="bg-blue"></view>
		<view  class="search"  style="margin:0 30rpx 0 30rpx;">
			<u-search shape="square"   :showAction="false" placeholder="搜索任务" v-model="keyword"></u-search>
		</view>
		<view>
			<m-notice></m-notice>
		</view>
		<view class="navigation">
			<m-navigation></m-navigation>
		</view>
		<view style="margin-top: 100rpx; margin-left: 20rpx;">
			急救任务
		</view>
		<view class="task-box">
			<view class="task-item">
				<m-task  v-for="(item,index) in taskList1" :item='item'></m-task>
			</view>
			<view class="not-more" v-show="show">暂无更多数据了~~</view>
		</view>

	</view>

</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		onLoad() {
			
			this.getTasks()
			let that = this
			setTimeout(()=>{
				that.getMessages()
			}
			,1000)
			// console.log("主页数据",this.msgList)
			// this.saveMessageList(this.msgList)
			// this.setMsgTip()
		},
		computed: {
			...mapGetters(['noCheckMsgNum']),
			// ...mapState(['noCheckMsgCount'])
		},
		data() {
			return {
				// noCheckMsg:2,
				currentPage: 1,
				msgList: [],
				taskList: [],
				taskList1: [],
				show: false,
				keyword:''
				
			};
		},
		onReachBottom() {
			// console.log("到底了")
			this.currentPage++
			this.getTasks()
		},
		onPullDownRefresh() {
			// console.log("刷新更新数据")
			this.currentPage = 1
			this.taskList = []
			// console.log(this.currentPage)
			this.getTasks()
		},
		watch:{
			keyword(newval){
				// console.log(this.taskList)
				 this.taskList1 = this.taskList.filter(item =>{
					 console.log(item)
					 if(item.title.includes(newval)){
						  return item
					 }
					
				 })
				 
				
				
			 }
		},
		
		methods: {
			...mapMutations(['saveMessageList', 'updateMessage', 'updateNoCheckSum']),

			clickNav(item) {
				console.log('item', item)
			},
			
			async getTasks() {
				uni.request({
					url: `${this.$baseUrl}/task/EmeTask/${this.currentPage}`,
					method: 'GET',
					success: (res) => {
						console.log(res.data.data)
						this.taskList = [...this.taskList, ...res.data.data]
						this.taskList1=this.taskList
						// console.log(res.data.data.length)
						if (res.data.data.length < 5) {
							// console.log("改变了")
							this.show = true
						}
						// this.taskList=res.data.data
					}
				})
			},
			async getMessages() {
				const user = uni.getStorageSync("user");
				console.log(user)
				uni.request({
					url: `${this.$baseUrl}/message/userMsg/${1}/${user.id}`,
					method: "GET",
					success: (res) => {
						// console.log(res.data)
						if (res.data.status) {
							this.msgList = res.data.data.records
							// console.log("查询结果数据",res.data.data)
							//将结果数据存到store中
							this.saveMessageList(this.msgList)
							// console.log("设置提醒1",this.noCheckMsgNum)
							this.setMsgTip(res.data.data.total)
							this.updateNoCheckSum(res.data.data.total)
						}
						// res.data.data=this.messageList           
					},
				})
			},

			// 设置消息提醒
			setMsgTip(value) {
				wx.setTabBarBadge({
					index: 1,
					text: '' + value
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.box {
		position: relative;
		overflow: hidden;
		.bg-blue {
			width: 2400rpx;
			height: 380rpx;
			border-bottom-right-radius: 40%;
			transform: translateX(-800px);
			background-color:rgba(72, 118, 255, 1);
		}
		.search{
			width: 686rpx;
			margin-left: 32rpx;
			border-radius: 8px;
			position: absolute;
			top: 16rpx;
			overflow: hidden;
		}
		.task-box {
			margin: 20rpx auto;
			
			width: 100%;
			// background-color: skyblue;
		}

		.navigation {
			position: relative;
			top: 30px
		}

		.not-more {
			text-align: center;
			// margin-top: 30rpx;
			font-size: 30rpx;
		}
	}
</style>
